<template>
	<div class="box">
		<!-- 教师信息-->
		<el-form :inline="true" :model="formInline" class="add demo-form-inline">
			<div style="display: flex;" class="big">
				<el-form-item label="姓名" class="uzname">
					<el-input class="searcha" v-model="inputs" placeholder="搜索教师"></el-input>
				</el-form-item>
				<el-form-item>
					<!-- <el-button type="primary" class="chaxun" @click="search">查询</el-button> -->
				</el-form-item>
			</div>

			<el-button class="posuy" type="primary" @click="addStudent">+添加 教师</el-button>
		</el-form>
		<el-table :data="tables.slice((currentPage - 1)*pageSize,currentPage*pageSize)" border height="500" style="width: 100%"
		 class="dis">
			<el-table-column fixed prop="id" label="ID号" width="150">
			</el-table-column>
			<el-table-column prop="name" label="姓名" :label-width="formLabelWidth" width="150">
			</el-table-column>
			<el-table-column prop="sex" label="性别" width="150">
			</el-table-column>
			<el-table-column prop="job" label="职位" width="150">
			</el-table-column>
			<el-table-column prop="level" label="级别" width="150">
			</el-table-column>
			<el-table-column prop="phone" label="联系电话" width="200">
			</el-table-column>

			<!-- 操作-->
			<el-table-column fixed="right" label="操作" width = "150">
				<template slot-scope="scope">
					<!-- 查看-->
					<!-- <el-button type="info" size="mini"@click="open">查看</el-button> -->
					<!-- 编辑-->
					<el-button type="primary" size="mini" icon="el-icon-edit" @click="ufaddIndex(scope.$index)"></el-button>
					<!-- 删除-->
					<el-button type="danger" size="mini" icon="el-icon-delete" @click="deleteRow(scope.$index, tableData)"></el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页器 -->
		<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" layout="prev, pager, next"
		 :total="100">
		</el-pagination>
		<!-- 添加教师弹窗区域 -->
		<el-dialog :title="state ? '修改教师信息' : '添加教师信息'" :visible.sync="dialogFormVisible" width="500px">
			<el-form :model="add">
				<el-form-item label="ID号" :label-width="formLabelWidth">
					<el-col :span="11" class='wid'>
						<el-input placeholder="输入ID号" v-model="add.id"  style="width: 380px;"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="姓  名" :label-width="formLabelWidth">
					<el-input v-model="add.name" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="性别" :label-width="formLabelWidth" v-model="add.sex">
					<el-radio-group v-model="add.sex" class="xinbei">
						<el-radio label="男">男</el-radio>
						<el-radio label="女">女</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="职位" :label-width="formLabelWidth">
					<el-select v-model="add.job" placeholder="请选择职位" style="width: 380px;">
						<el-option label="前端讲师" value="前端讲师"></el-option>
						<el-option label="数据讲师" value="数据讲师"></el-option>
						<el-option label="java讲师" value="java讲师"></el-option>
						<el-option label="框架讲师" value="框架讲师"></el-option>
						<el-option label="测试讲师" value="测试讲师"></el-option>
						<el-option label="就业老师" value="就业老师"></el-option>
						<el-option label="生活老师" value="生活老师"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="级别" :label-width="formLabelWidth">
					<el-input v-model="add.level" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="联系方式" :label-width="formLabelWidth">
					<el-input :span="11" v-model="add.phone" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="adda">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 编辑教师信息弹出框 -->
		<el-dialog title="请编辑信息" :visible.sync="dialogFormVisible2" width="500px" center>
			<el-form :model="ufadd">
				<el-form-item label="ID" :label-width="formLabelWidth">
					<el-col :span="11" class='wid'>
						<el-input placeholder="输入ID号" v-model="ufadd.id"  style="width: 380px;"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="姓  名" :label-width="formLabelWidth">
					<el-input v-model="ufadd.name" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="性别" :label-width="formLabelWidth" v-model="ufadd.sex">
					<el-radio-group v-model="ufadd.sex" class="xinbei">
						<el-radio label="男">男</el-radio>
						<el-radio label="女">女</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="职位" :label-width="formLabelWidth">
					<el-select v-model="ufadd.job" placeholder="请选择职位" style="width: 380px;">
						<el-option label="前端讲师" value="前端讲师"></el-option>
						<el-option label="数据讲师" value="数据讲师"></el-option>
						<el-option label="java讲师" value="java讲师"></el-option>
						<el-option label="框架讲师" value="框架讲师"></el-option>
						<el-option label="测试讲师" value="测试讲师"></el-option>
						<el-option label="就业老师" value="就业老师"></el-option>
						<el-option label="生活老师" value="生活老师"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="级别" :label-width="formLabelWidth">
					<el-input v-model="ufadd.level" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="联系方式" :label-width="formLabelWidth">
					<el-input :span="11" v-model="ufadd.phone" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="bianji()">确 定</el-button>
			</div>
		</el-dialog>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				tableData: [],
				inputs: '',
				tabase: '',
				formInline: '',
				//教师信息添加弹出框数据
				add: {
					id: '',
					name: '',
					sex: '',
					job: '',
					level: '',
					job: ''
				},
				//教师信息编辑弹出框数据
				ufadd: {
					id: '',
					name: '',
					sex: '',
					job: '',
					level: '',
					job: ''
				},
				//编辑索引
				Index: '',
				state: false,
				//编辑教师信息
				dialogFormVisible2: false,
				// tableDataa: [],
				// 添加教师信息
				dialogFormVisible: false,
				form: {},
				formLabelWidth: '70px',

				// 分页的参数
				total: this.total,
				currentPage: 1, //当前页数
				pageSize: 10 // 每页显示条数
			}

		},
		// computed:{
		//   pages: function () {
		//     return
		//   }
		// },
		methods: {
			sure() {
				if (this.state) {
					//调用修改接口
					this.service.put('接口地址', this.form)
						.then(res => {

						})
						.catch(err => {
							console.log(err)
						})
				} else {
					//调用新增接口
					this,
					service.post('接口地址', this.form)
					.then(res => {

					})
					.catch(err => {
						console.log(err)
					})
				}
				this.dialogFormVisible = false
			},
			//添加教师数据
			addStudent() {
				this.state = false
				this.form = {
					sex: '1'
				}
				//点击弹出添加数据
				this.dialogFormVisible = true
				this.adda.number = this.resdata.length + 1;
			},
			// handleClick(row) {
			//   console.log(row);
			// },
			deleteRow(index, rows) { /* 删除 */
				var newPage = index + (this.currentPage - 1) * 10;
				console.log(newPage)
				rows.splice(newPage, 1);
			},
			/* 查看 */
			open() {
				this.$alert('这是一段内容', '标题名称', {
					confirmButtonText: '确定',
					callback: action => {
						this.$message({
							type: 'info',
							message: `action: ${ action }`
						});
					}
				});
			},
			/* 分页器*/
			handleSizeChange(val) {
				this.pageSize = val
				this.currentPage = 1
				// console.log(`每页 ${val} 条`)
			},
			handleCurrentChange(val) {
				this.currentPage = val
				console.log(`当前页: ${val}`);
			},
			// add (){
			// },
			// 点击确定向表中添加数据
			adda() {
				this.dialogFormVisible = false;
				this.tableData.push(this.add);
				this.add = {
					id: '',
					name: '',
					sex: '',
					job: '',
					level: '',
					job: ''
				}
			},
			ufaddIndex(index) {
				//点击编辑教师弹出弹窗并获取index
				this.Index = index;
				this.dialogFormVisible2 = true;
			},
			bianji() {
				//点击确定修改编辑
				this.tableData[this.Index] = this.ufadd;
				console.log(this.Index);
				this.dialogFormVisible2 = false;
				this.ufadd = {
					id: '',
					name: '',
					sex: '',
					job: '',
					level: '',
					job: ''
				}
			},
			getBanner(){
				this.axios.get('http://10.1.8.189:3000/api/user/all').then((res)=>{
					this.tableData = res.data;
					console.log(res)
				})
			}
		},
		computed: {
			tables() { //在你的数据表格中定义tabels
				const inputs = this.inputs;
				if (inputs) {
					return this.tableData.filter(data => {
						console.log("object:" + Object.keys(data))
						return Object.keys(data).some(key => {
							return String(data[key]).toLowerCase().indexOf(inputs) > -1
						})
					})
				}
				return this.tableData
			}
		},
		mounted() {
			this.getBanner();
			this.typelist();
			this.recommend();
			this.like();
			this.integral();
			this.allgoods();
		}
	}
</script>

<style>
	div {
		text-align: center;
	}

	.box {
		box-shadow: 0px 0px 10px #FFFFFF;
		padding: 20px;
		background-color: #fff;
		padding-bottom: 65px;
		/* overflow-y: auto; */
	}

	.uzname {

		text-align: right;
	}

	.el-form--inline {

		text-align: left;
		display: flex;
	}

	.el-form-item.uzname {

		display: flex;
		font-size: 16px;
	}

	.chaxun {
		width: 80px;
		height: 40px;
		text-align: center;
	}

	.add {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.searcha {
		margin: 0 auto;
	}

	.posuy {
		height: 40px;
		width: 100px;
	}

	.dis {
		
		box-shadow: 0px 2px 20px #E9EEF3;
		margin-bottom: 10px;
	}

	.chakan {
		background-color: blue;
		width: 50px;
		color: #fff;
	}

	.xinbei {
		margin-right: 260px;
	}
</style>
